<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信聊天界面</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/iconfont.css">

  <link rel="stylesheet" href="css/wechat.css">
</head>

<body>

  <!-- 整体为上中下布局，上下区域固定不动，中间有滚动条-->
  <div class="container">

    <!-- 上方 -->
    <div class="top-box">

      <div>微信</div>

      <div>
        <i class="iconfont">&#xe617;</i>
        <i class="iconfont">&#xe657;</i>
      </div>

    </div>


    <!-- 中间区域有两层，外面一层固定大小，里面出滚动条 -->
    <div>

      <div class="center-box">

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        <!-- 聊天内容 -->
        <div class="chat-info-box">

          <!-- 左边是图标 -->
          <div class="chat-left">
            <i class="iconfont">&#xe600;</i>
          </div>

          <!-- 右边是两行 -->
          <div class="chat-right">

            <!-- 第一行是用户名和时间 -->
            <div class="chat-right-1">
              <div>教学部</div>
              <div>10:05</div>
            </div>

            <!-- 第二行 -->
            <div class="chat-right-2">
              <div>通知：......</div>
              <i class="iconfont">&#xe66f;</i>
            </div>

          </div>


        </div>

        



      </div>
    </div>



    <!-- 下方是四个图标 -->
    <div class="bottom-box">

      <div>
        <i class="iconfont active">&#xe62f;</i>
        <br>
        微信
      </div>

      <div>
        <i class="iconfont">&#xe655;</i>
        <br>
        通讯录
      </div>

      <div>
        <i class="iconfont">&#xe609;</i>
        <br>
        发现
      </div>

      <div>
        <i class="iconfont">&#xe758;</i>
        <br>
        我
      </div>


    </div>

  </div>


</body>

</html>